<template>  
  <div id="age" style="width:100%;height:220px;"></div>
</template>

<script>
import {getage} from 'config/api';
export default {
  data () {
    return {
    //  年龄段统计
      ages_obj: {
        title: {
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}人 ({d}%)"
        },
        legend: {
          data: ['25岁以下', '25-35岁', '35-50岁', '50-60岁', '60岁以上']
        },
        series: [{
          // roseType: 'angle',
          name: '员工年龄段',
          type: 'pie',
          radius: '70%',
          center: ['50%', '65%'],
          data: [
            {value: 1, name: '25岁以下'},
            {value: 1, name: '25-35岁'},
            {value: 1, name: '35-50岁'},
            {value: 1, name: '50-60岁'},
            {value: 1, name: '60岁以上'}
          ],
          labelLine: {
            normal: {
              smooth: 0.2,
              length: 10,
              length2: 20
            }
          }
        }]
      }
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.age();  //  年龄统计
    });
  },
  methods: {
  //  年龄统计(这个没有接口，使用模拟数据 2018/01/19)
    age () {
      getage().then((res) => {
        let myChart = echarts.init(document.getElementById("age"), 'dark'); //  获取Canvas
        myChart.setOption(this.ages_obj); //  插入数据
        //  Canvas自适应
        // window.addEventListener('resize', function () {
        //   myChart.resize();
        // });
      });
    }
  }
};
</script>
